/**
* Created by yyr on 2018/1/31
*已到期基金》列表页
*/
<template>
    <div>
        <div class="right">
            <el-row>
                <el-col :span="24">
                        <div class="ca-pull-right">
                            <el-input  placeholder="基金名称，支持模糊查询" class="ca-w-280 ca-m-r-15" v-model="param.name"  @keyup.enter.native="fundList">
                                <el-button slot="append" icon="el-icon-search" @click="fundList()"></el-button>
                            </el-input>
                            <el-button  @click="downloadFile" type="primary" :disabled="!isAuthExpiredDownLoad">下载</el-button>
                        </div>
                </el-col>
            </el-row>
            <div class="ca-m-t-15">
                <el-table
                    :data="fundData"
                    border
                    @sort-change="sortChange"
                    stripe
                    style="width:100%" class="ca-table">
                    <el-table-column label="序号" type="index" align="center" width="60px">
                        <template slot-scope="scope">
                            <csRedDot :label="(param.pageIndex-1)*param.pageSize+scope.$index+1+''"
                                      :showDot="scope.row.red == 1?true:false" :type="1"></csRedDot>
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="基金名称"
                        sortable="custom"
                        prop="fundName"
                        show-overflow-tooltip>
                        <template slot-scope="scope">
                            <el-button type="text"
                                       @click="fundDetail(scope.row.id)"
                                       :disabled="!isAuthInvestedFundDetail"
                                       class="ca-underline">{{scope.row.fundName}}
                            </el-button>
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="基金经理"
                        sortable="custom"
                        show-overflow-tooltip
                        prop="managerName">
                    </el-table-column>
                    <el-table-column
                        sortable="custom"
                        prop="estTime"
                        :render-header="renderTitle"
                        label="成立时间</br>">
                    </el-table-column>
                    <el-table-column
                        sortable="custom"
                        prop="duration"
                        label="存续期">
                    </el-table-column>
                    <el-table-column
                        prop="scale"
                        sortable="custom"
                        :render-header="renderTitle"
                        label="基金规模</br>(万元)">
                        <template slot-scope="scope">
                            {{scope.row.scale | format1}}
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="paid"
                        sortable="custom"
                        :render-header="renderTitle"
                        label="实缴总额</br>(万元)">
                        <template slot-scope="scope">
                            {{scope.row.paid | format1}}
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="amountInvested"
                        sortable="custom"
                        :render-header="renderTitle"
                        label="投资金额</br>(万元)">
                        <template slot-scope="scope">
                            {{scope.row.amountInvested | format1}}
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="amount"
                        sortable="custom"
                        :render-header="renderTitle"
                        label="分配金额</br>(万元)">
                        <template slot-scope="scope">
                            {{scope.row.amount | format1}}
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="exitProject"
                        sortable="custom"
                        :render-header="renderTitle"
                        label="退出项目</br>数">
                        <template slot-scope="scope">
                            {{scope.row.exitProject}}
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="exitProjectMoney"
                        sortable="custom"
                        :render-header="renderTitle"
                        label="退出总金额</br>(万元)">
                        <template slot-scope="scope">
                            {{scope.row.exitProjectMoney | format1}}
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="ca-m-t-20 ca-align-center">
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="param.pageIndex"
                    :page-sizes="vuePageSizes"
                    :page-size="param.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="totalCount">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script type="text/ecmascript-6">
    import {api} from './api';
    import {STATUS_HTTP_SUCCESS, apiHttp} from '__service/csHttp';
    import {isNoAuth} from '__service/utils';
    export default {
        data() {
            return {
                isAuthExpiredDownLoad: isNoAuth('已到期基金-列表页-下载'),
                isAuthInvestedFundDetail: isNoAuth('已设立基金-基金详情-查看'),
                currentPage: 1,
                fundData: [],
                param: {
                    name: '',
                    fundType: '',
                    fundState: 1,
                    pageIndex: 1,
                    pageSize: 30,
                    orderBy: '',
                    sort: '',//desc降序
                },
                size: null, //当前页的数量
                totalCount: null,//总记录数
                totalPage: null, //总页数
                keyName: '',
            }
        },
        watch: {
        },
        props: {},
        mounted() {
            this.fundList();
        },
        methods: {
            fundList() {
                this.keyName = this.param.name;
                apiHttp(api.EXPIRED_FUNDS,this.param).then( ret=>{
                    if (ret.resCode === STATUS_HTTP_SUCCESS) {
                        this.fundData = ret.data.resultData;
                        this.param.pageIndex = ret.data.pageIndex;
                        this.totalPage = ret.data.totalPage;  //总页数
                        this.size = ret.data.size;   //当前页的数量
                        this.totalCount = ret.data.totalCount; //总记录数
                    }
                })
            },
            fundDetail(id) {
                this.$router.push({name: 'investing-funds',params: {fundId: id,tabIndex: 0}})
            },
            //排序
            sortChange(params) {
                if (!params.order) {
                    this.param.orderBy = '';
                    this.param.sort = '';
                } else {
                    this.param.sort = params.order === 'ascending' ? 'asc' : 'desc';
                    this.param.orderBy = params.prop;
                    this.fundList();
                }
            },
            // 改变每页显示的条数
            handleSizeChange(val) {
                this.param.pageSize = val;
                this.fundList();
            },
            // 改变当前页
            handleCurrentChange(val) {
                this.param.pageIndex = val;
                this.fundList();
            },
            //文件下载
            downloadFile() {
                if (this.fundData.length === 0) {
                    this.$message({
                        type: 'warning',
                        message: '无数据!'
                    });
                } else {
                    window.open(this.baseURL + api.DOWNLOAD_FILE.url + '?X-Token=' + this.$store.state.user.token + '&type=7&name=' + this.keyName + '&fundState=1' );
                }
            },
        },
        components: {
            csRedDot: require('__components/red-dot'), // 小红点
        },
    }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>

</style>
